<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/echarts/dist/echarts.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        let option = {
            // tooltip: {
            //     trigger: 'item'
            // },
            // legend: {
            //     top: '5%',
            //     left: 'center'
            // },
            series: [{
                startAngle: 180,
                name: '访问来源',
                type: 'pie',
                // 内外半径
                radius: ['50%', '70%'],
                //是否启用防止标签重叠策略
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [{
                        value: 3,
                        name: '搜索引擎',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: '#0063c2'
                                    },
                                    {
                                        offset: 1,
                                        color: '#00c3de'
                                    }
                                ]
                            )
                        },
                    },
                    {
                        value: 1,
                        name: '直接访问',
                        itemStyle: {
                            color: '#d0274d'
                        }
                    },
                    {
                        value: 4,
                        name: '邮件营销',
                        itemStyle: {
                            color: 'transparent'
                        }
                    },
                ]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>